import { useState, useEffect } from 'react';

const URL = 'http://geek.itheima.net/v1_0/channels'

export default function App() {
  const [count, setCount] = useState(1)

  const [list, setList] = useState([])

  useEffect(() => {
    // async function getList() {
    //   const res = await fetch(URL)
    //   console.log(12, res);
    // }

    // getList()
    console.log('useEffect');
    (async function getList(a, b) {
      console.log('getList');
      const res = await fetch(URL)
      console.log(12, res.json);

      const res2 = await res.json()
      console.log(34, res2.data.channels);

      setList(res2.data.channels)

    })(1, 2)

    const timer = setTimeout(() => {
      console.log('timeerrrr');
    })

    return () => {
      clearTimeout(timer)
    }
  }, [count])
  return (
    <div>
      <h1>16.useEffect-概念理解和基础使用</h1>
      <hr />

      <h3>count: {count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <h2>{!list.length && '暂无数据'}</h2>
      <ul >
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>


    </div >
  )
}